<template>
    <a-layout class="homepage-layout">
        <a-layout-header class="homepage-header">
            <div class="header-inner">
                <div class="logo">API 调用平台</div>
                <a-menu
                        v-model:selectedKeys="selectedKeys"
                        theme="dark"
                        mode="horizontal"
                        class="nav-menu"
                        @click="handleMenuClick"
                >
                    <a-menu-item key="home">概览</a-menu-item>
                    <a-menu-item key="users">用户管理</a-menu-item>
                </a-menu>
                <div class="user-area">
                    <a-dropdown placement="bottomRight" :trigger="['hover']">
                        <div class="avatar-wrapper">
                            <a-avatar :size="36" :src="avatarUrl">
                                {{ avatarFallbackLetter }}
                            </a-avatar>
                        </div>
                        <template #overlay>
                            <a-menu @click="handleUserMenuClick">
                                <a-menu-item key="profile">个人主页</a-menu-item>
                                <a-menu-item key="logout">退出登录</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </div>
        </a-layout-header>
        <a-layout-content class="homepage-content">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>首页</a-breadcrumb-item>
                <a-breadcrumb-item>概览</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="content-card">
                欢迎使用一站式接口平台，这里展示你的内容区域。
            </div>
        </a-layout-content>
        <a-layout-footer class="homepage-footer">
            一站式接口平台 ©2025
        </a-layout-footer>
    </a-layout>
    
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

const router = useRouter();
const selectedKeys = ref(['home']);

const handleMenuClick = ({ key }) => {
  switch (key) {
    case 'home':
      router.push('/');
      break;
    case 'users':
      router.push('/users');
      break;
  }
};

const handleLogout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  message.success('已退出登录');
  router.push('/login');
};

// 用户信息与头像
const userInfoRaw = ref(localStorage.getItem('userInfo'));
const userInfo = computed(() => {
  try { return userInfoRaw.value ? JSON.parse(userInfoRaw.value) : null; } catch { return null; }
});
const isLoggedIn = computed(() => !!localStorage.getItem('token'));
const avatarUrl = computed(() => userInfo.value?.avatarUrl || 'https://i.pravatar.cc/80');
const avatarFallbackLetter = computed(() => {
  const name = userInfo.value?.userName || userInfo.value?.userAccount || 'U';
  return String(name).charAt(0).toUpperCase();
});

const handleUserMenuClick = ({ key }) => {
  if (key === 'profile') {
    // 这里暂时跳转到用户管理页，实际可换成个人主页路由
    router.push('/users');
  }
  if (key === 'logout') {
    handleLogout();
  }
};

onMounted(() => {
  // 登录后的进入首页，右上角提示一次“已登录”
  if (isLoggedIn.value && !sessionStorage.getItem('loginNotified')) {
    message.success('已登录');
    sessionStorage.setItem('loginNotified', '1');
  }
});
</script>
<style scoped>
.homepage-layout {
    min-height: 100vh;
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
}
.homepage-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    padding: 0 28px;
}
.logo {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 18px;
}
.nav-menu {
    flex: 1;
    margin-left: 24px;
    border-bottom: none;
}
.user-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.homepage-content {
    width: 100%;
    padding: 20px 28px 28px;
    font-size: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 允许子元素在 flex 容器内正确溢出/滚动 */
}
.breadcrumb {
    margin: 16px 0 14px;
}
.content-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 32px;
    font-size: 16px;
    line-height: 1.8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    flex: 1;
    min-height: 0; /* 使卡片在剩余空间内自适应高度 */
}
.homepage-footer {
    text-align: center;
    color: rgba(0, 0, 0, 0.45);
    background: transparent;
    padding: 24px 16px 32px;
}

/* 组件内覆盖 AntD 默认间距（仅限本组件） */
:deep(.ant-breadcrumb) {
    font-size: 14px;
}
:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected) {
    background: rgba(255, 255, 255, 0.15);
}
:deep(.ant-menu-dark.ant-menu-horizontal) {
    border-bottom: none;
}
:deep(.ant-menu-horizontal > .ant-menu-item) {
    font-size: 15px;
    padding-inline: 20px;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .header-inner {
        padding: 0 16px;
    }
    .homepage-content {
        padding: 14px 16px 20px;
    }
    .content-card {
        padding: 18px;
        border-radius: 6px;
    }
    .nav-menu {
        display: none;
    }
}
</style>